<template>
  <view @click="uniNavigator({ url: `/pages/client/mall/goodsInfo?sn=${item.goods_sn}` })"
    class="bg-section b-rounded-16 p-12"
    :style="{ width: `calc((100% - 20rpx) / 2)`, margin: `0 0 20rpx ${index % 2 ? `20rpx` : 0}`, backdropFilter: `blur(12rpx)` }">
    <uv-image radius="16" width="100%" height="316" :src="include(item.goods_img)" observeLazyLoad mode="aspectFit" />
    <view class="mt-12 flex-1 justify-center">
      <text class="text-28 multi-ellipsis">{{ item.goods_name || "-" }}</text>
    </view>
    <view class="mt-24">
      <label class="mt-12">
        <text class="flex-1 color-stress">
          <text class="text-36 font-bold">{{ Number(item.price || 0).toFixed(2) }}</text>
        </text>
        <uv-icon :custom-style="{ borderRadius: '50%', backgroundColor: 'rgba(56, 169, 255, 0.1)', padding: `6rpx` }"
          size="30" name="/static/img/icon-buy-primary.svg" />
      </label>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { uniNavigator } from "@/common/libs/utils";

const { $config = {} } = getApp().globalData || {};

defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  index: {
    type: Number,
    default: 0
  }
});

</script>

<style lang="scss" scoped>
// scss
</style>